{% extends '_base.html' %}

{% block contain %}
<style>
    .containerc {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 580px;
        border: 1px solid black;
        margin-inline: 10px;
    }

    input {
        border-width: 0;
    }

    /* 1 大号倒计时框 */
    div.timer {
        font-size: 20rem;
    }

    input.timer {
        width: 25rem;
        height: 500px;
        font-size: 20rem;
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
    }

    /* 2 小号正计时框 */
    div.timer-s {
        font-size: 50px;
    }

    input.timer-s {
        width: 110px;
        height: 90px;
        font-size: 4rem;
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
    }

    .button-big {
        /* width: 220px; */
        padding-inline: 4rem;
        height: 80px;
        font-size: 30px;
        text-align: center;
    }

    /* 小屏幕尺寸下 */
    @media screen and (max-width: 1000px) {
        .button-big {
            padding-inline: 1.5rem;
        }
    }
</style>

<body>
    <audio id="over_music">
        <source src="{{ url_for('static', filename='class.mp3') }}">
    </audio>

    <audio id="loop_music">
        <!-- 持续媒体播放 - 防浏览器后台待机 方案C -->
        <source src="{{ url_for('static', filename='learn_low.mp3') }}">
    </audio>

    <audio id="quiet_music">
        <!-- 低分贝假装静音，因为要保持后台运行 -->
        <source src="{{ url_for('static', filename='nearly_quiet.mp3') }}">
    </audio>

    <div class="containerc">
        <!-- 备注：应该是分和秒？ -->
        <div class="timer">
            <input id="hour" class="timer">:<input id="minute" class="timer"><br>
        </div>
    </div>
    <div class="timer-s">
        <input id="hour-pass" class="timer-s">:<input id="minute-pass" class="timer-s">
        <button class="button-big" onclick="resetCountDown()">重置倒计时</button>
        <button class="button-big" onclick="cancel()">丢弃</button>
        <button id="pause" class="button-big" onclick="pauseTimer()">暂停</button>
        <button class="button-big" onclick="submit()">完成</button>
        <button id="btn_music" class="button-big">安静</button>
    </div>

</body>

<script type="text/javascript">
    var seconds_pass = parseInt('{{ seconds_pass }}');
    var maxtime_init = parseInt('{{ minute * 60 }}');

    var stime = new Date();
    var maxtime = maxtime_init - seconds_pass;  // 倒计时秒数
    var passtime = seconds_pass;  // 正计时秒数

    var waitime = 0; // 暂停时长
    var pause_date = null;

    // 循环白噪声 - 防手机上后台待机 方案C
    var lmusic = $("#loop_music")[0];
    lmusic.loop = true;
    lmusic.play();

    var qmusic = $("#quiet_music")[0];
    qmusic.loop = true;

    // 1 计时更新
    function UpdateUI(t) {
        if (t == 0) {
            var music = $("#over_music")[0];
            music.play();
        } else if (t < 0) {
            t = 0;
        }
        function f(eid, value) { $(`#${eid}`).val(Math.floor(value)); }
        f('hour', t / 60); f('minute', t % 60); f('hour-pass', passtime / 60); f('minute-pass', passtime % 60);

        if (t > 0) { $("title").html(Math.floor(t / 60) + ":" + Math.floor(t % 60) + ' Strong'); }
        else { $("title").html(Math.floor(passtime / 60) + ":" + Math.floor(passtime % 60) + ' Strong'); }
    }
    function UpdateTime() {
        passtime++;
        // 每一会儿校正一次（真聪明）
        if (passtime % 3 == 0) {
            var now = new Date();
            var pass_2 = (now - stime) / 1000;
            var dis = parseInt(pass_2 - passtime - waitime);
            // console.log(stime, now, pass_2, dis);
            if (dis > 3) {
                passtime += dis;
                maxtime -= dis;
            }
        }
        UpdateUI(maxtime--);
    }

    // 2 时钟控制
    var is_work = true;
    function pauseTimer() {
        // clearInterval(timer);
        is_work = false;
        var btn = document.getElementById("pause");
        btn.innerHTML = "继续";
        btn.onclick = continueTimer;

        pause_date = new Date();
    }
    function continueTimer() {
        // timer = setInterval(UpdateTime, 1000);  //1s后才会第一次执行
        is_work = true;
        var btn = document.getElementById("pause");
        btn.innerHTML = "暂停";
        btn.onclick = pauseTimer;

        // 暂停计时也要考虑 待机 的问题
        if (pause_date != null) {
            con_date = new Date();
            waitime += (con_date - pause_date) / 1000;
        }
    }
    function resetCountDown() {
        maxtime = maxtime_init;
    }
    var btn_stat = 0;
    $('#btn_music').click(function () {
        btn_stat ^= 1;
        if (btn_stat == 1) {
            $(this).text('音乐(关)');
            lmusic.pause()
            qmusic.play()
        } else {
            $(this).text('音乐(开)');
            qmusic.pause()
            lmusic.play()
        }
    });

    // 3 任务提交
    var worker = null;
    function exit() {
        worker.terminate(); // 防止在打包app的页面栈里，换页面了还在后台计时
        lmusic.pause();
    }
    function submit() {
        exit()
        var m = Math.round(passtime / 60);
        var s = parseInt(passtime);
        var url = `{{ url_for('task.task_submit', task_id=task.id) }}/${m}?next={{ request.endpoint }}&seconds_pass=${s}`;
        window.location.href = url;  // 切换路由
    }
    function cancel() {
        exit()
        var url = "{{ url_for('task.task_doing') }}";
        window.location.href = url;
    }

    // 4 worker - 防浏览器后台待机 方案B
    var url = "{{ url_for('static', filename='js/clock.js') }}";
    worker = new Worker(url);
    worker.postMessage({ command: "start" });

    worker.onmessage = function (e) {
        if (is_work) { UpdateTime(); }
        console.log('work...');
    };
    
</script>

{% endblock %}